
<div id="parser-panel">
    <!--<div class="progress-bar orange shine"> -->
    <div class="progress-bar orange">
        <span id="progress" style="width: 0%"> </span>
        <div id="progress-bar-text" class="text"></div>
    </div>
    <div>
        Start Page:    
        <input type="text" value="1" placeholder="Start position"  id="start-pos" />
        End Page: 
        <input type="text" value="365" placeholder="End position"  id="end-pos" />
        <button id="start-bt" class="">Start</button>
        <button id="pause-bt" class="invisible">Pause</button>
        <button id="end-bt" class="invisible">Stop</button>
        
    </div>

</div>




<script>     	
   
   $(document).ready(function(){
        $("#start-bt").click(function(){
            startParse();
        }); 
        $("#end-bt").click(function(){
            stopParse();
        }); 
        $("#pause-bt").click(function(){
            pauseParse();
        });                    
   });
    
    
            
    var startPos = 1;
    var endPos = 365;
    var curPos = 1;
    var canParse = false;
    
    function startParse(){
        $("#start-bt").toggleClass('invisible');
        $("#end-bt").toggleClass('invisible');   
        $("#pause-bt").toggleClass('invisible');  
        
        
        $(".progress-bar").toggleClass('shine');    
        
        canParse = true;
        
        startPos = parseInt($("#start-pos").val());
        curPos = startPos;
        endPos = parseInt($("#end-pos").val());
        
        $("#progress-bar-text").text('#' + curPos + " ( " + 0 + "% )" );
        
        $("#progress").attr('style' ,"width: " + 0 + "%");        
       // alert(startPos);
     //   alert(endPos);
        ajaxParse();
        
                           
    }    
    
    function pauseParse(){
        canParse = !canParse;
        $(".progress-bar").toggleClass('shine'); 
        if(canParse) {
            $('#pause-bt').text("Pause");
        } else {
            $('#pause-bt').text("Resume");
        }
        if(canParse){
            ajaxParse();
        }
    }
    
    function stopParse(){
        $("#start-bt").toggleClass('invisible');
        $("#end-bt").toggleClass('invisible');   
        $("#pause-bt").toggleClass('invisible');
        $(".progress-bar").toggleClass('shine'); 
        
        canParse = false;                      
    }       
    
    function ajaxParse(){
            // set new values to server
        $.post(HOST + "/admin/index/ajaxparse/format/html/", { startPos: startPos , curPos: curPos, endPos: endPos                                                                                                                                                                                          
            }, function(e){  
                if(e.result == true) {
                    startPos = e.startPos;
                    curPos = e.curPos;
                    endPos = e.endPos;
                    
                    $("#start-pos").val(startPos);
                    $("#end-pos").val(endPos);
                    
                    persent = (endPos - curPos + 1) / (endPos - startPos + 1);
                    persent = 100 - 100 * persent.toFixed(2) ;
                    $("#progress-bar-text").text('#' + (curPos - 1) + " ( " + persent + "% )" );
                    
                    $("#progress").attr('style' ,"width: " + persent + "%");
                    
                    if(curPos > endPos ) {
                        stopParse();
                    }
                    
                    if(canParse){
                        setTimeout(ajaxParse, 100);    
                    }
                    
                    
                    
                } else {
                    alert("error!!!");
                    stopParse();
                    
                }
            },
        'json');        
        }
           
</script>